<template>
  <div>
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="{ pic, pid, title } in items" :key="pid">
        <div>
          <a href="">
            <div>
              <img class="city_photo" :src="`img/${pic}`" alt="" />
              <button>
                <i class="el-icon-star-off"></i>
              </button>
            </div>
            <div class="name">{{ title }}</div>
          </a>
        </div>
      </swiper-slide>
      <div
        style="position: absolute; top: 40%; left: 0px"
        class="swiper-button-prev rot"
        slot="button-prev"
      >
        <svg viewBox="0 0 24 24" width="24px" height="24px">
          <path
            d="M10.304 3.506l-8.048 8.047a.644.644 0 000 .895l8.048 8.047a.624.624 0 00.883 0l.882-.883a.624.624 0 000-.883l-5.481-5.48h14.714a.625.625 0 00.623-.625v-1.248a.624.624 0 00-.623-.624H6.588l5.481-5.481a.624.624 0 000-.883l-.882-.883a.623.623 0 00-.883-.004c-.001.002-.002.003 0 .005z"
          ></path>
        </svg>
      </div>
      <div
        style="position: absolute; top: 40%; right: 8px"
        class="swiper-button-next rot"
        slot="button-next"
      >
        <svg viewBox="0 0 24 24" width="24px" height="24px">
          <path
            d="M13.696 3.502a.624.624 0 00-.884.004l-.882.883a.624.624 0 000 .883l5.481 5.481H2.698a.624.624 0 00-.623.624v1.248c0 .346.279.623.623.625h14.714l-5.481 5.48a.624.624 0 000 .883l.882.883c.245.244.64.244.883 0l8.049-8.047a.646.646 0 000-.895l-8.049-8.048v-.004z"
          ></path>
        </svg>
      </div>
    </swiper>
  </div>
</template>

<script>
export default {
  props: ["items"],
  data() {
    return {
      value: 3.5,
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 2,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  width: 1152px;
}
a {
  text-decoration: none;
  color: #000;
  position: relative;

  div:nth-child(1) {
    display: flex;
    position: relative;

    button {
      position: absolute;
      right: 15px;
      top: 8px;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 50%;
      opacity: 0.8;
      padding: 5px;
      i {
        font-size: 20px;
      }
    }
  }
  div:nth-child(2) {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 32px 16px 16px;
    font-size: 28px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 3px;
  }
  div:nth-child(4) {
    color: #333333;
  }
  .city_photo {
    width: 279px;
    height: 220px;
    &:hover {
      opacity: 0.7;
    }
  }
}
.swiper-container {
  --swiper-navigation-size: 0;
}

.swiper-button-prev,
.swiper-button-next {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 6px;
  background-color: white;
  border: 1px solid black;
  &:hover {
    background-color: #e4e4e4;
    color: white;
  }
}
//轮播图按钮禁用时不显示
.swiper-button-disabled {
  opacity: 0;
}
</style>
